<template>
    <section>
        <!--列表-->
        <div class="panel">
            <div class="panel-head"><strong><i class="el-icon-date"/>
                <span class="title">员工列表</span></strong></div>
            <el-row style="margin-top: 10px;margin-left: 10px;">
                <el-col :span="4">
                    <el-select v-model="formInline" placeholder="请选择" size='small' style="width: 120px">
                        <el-option label="手机号" value="mobile"/>
                        <el-option label="姓名" value="name"/>
                    </el-select>
                </el-col>
                <el-col :span="5">
                    <el-input v-model.trim="input" placeholder="请输入内容" clearable size='small' style="width:200px"/>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" size="small" @click='handelSearch(1)' class='ml-30'>查询</el-button>
                </el-col>
                <el-col :span="2" :offset="9">
                    <el-button type="primary" size="small" @click='addLabel'>添加新员工</el-button>
                </el-col>
            </el-row>
            <div class="body-content">
                <el-table :data="tableData" border v-loading="listLoading" element-loading-text="拼命加载中" style="width: 100%">
                    <el-table-column prop="userName" label="登录名"/>
                    <el-table-column prop="name" label="真实姓名"/>
                    <el-table-column prop="mobile" label="工作手机"/>
                    <el-table-column prop="lastLoginTime" width='180' label="最后时间"/>
                    <el-table-column prop="roles" label="权限" width="200"/>
                    <el-table-column width="80" prop="status" label="状态"/>
                    <el-table-column width="80" prop="type" label="账号"/>
                    <el-table-column width="90" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size='mini' @click="editLable(scope.row)">编辑</el-button>
                        <!-- <el-button type="danger" size='mini' @click='deladmin(scope.$index,scope.row.adminUserId)'>删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="block pages">
                <el-pagination background layout="prev, pager, next" :page-count="total" @current-change="handleCurrentChange"/>
            </div>
        </div>
        <el-dialog @close='closedailog' @open='opendailog' :close-on-click-modal='closeOnClickModal' :title='dailogTitle' :visible.sync="addLabelVisible" width="40%">
            <el-form :model="adminUser" :rules="rules" ref="adminUser" class="demo-ruleForm">
                <el-form-item label="登录名" prop="userName" :label-width="formLabelWidth">
                    <el-input placeholder="请输入内容" v-model.trim="adminUser.userName" :disabled="disabname" style="width:200px;"/>
                </el-form-item>
                <el-form-item label="密码" prop="passWord" :label-width="formLabelWidth">
                    <el-input type="password" placeholder="请输入内容" v-model.trim="adminUser.passWord" style="width:200px;"/>
                </el-form-item>
                <el-form-item label="真实姓名" prop="name" :label-width="formLabelWidth">
                    <el-input placeholder="请输入内容" v-model.trim="adminUser.name" style="width:200px;"/>
                </el-form-item>
                <el-form-item label="工作手机" prop="mobile" :label-width="formLabelWidth">
                    <el-input placeholder="请输入内容" v-model.trim="adminUser.mobile" style="width:200px;"/>
                </el-form-item>
                <el-form-item label="权限类型" :label-width="formLabelWidth">
                    <el-select @change='selectChange' v-model="rolevalue" placeholder="请选择" style="width: 130px">
                        <el-option v-for="item in roleoptions" :key="item.autoId" :label="item.name" :value="item.name"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                    <el-tag :key="tag" v-for="tag in dynamicTags" :closable="true" type="success" :close-transition="false" @close="handleClose(tag)">
                        {{tag}}
                    </el-tag>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-radio-group v-model="adminUser.type">
                        <el-radio :label="1">在职</el-radio>
                        <el-radio :label="0">离职</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="登录" :label-width="formLabelWidth" prop="type">
                    <el-radio-group v-model="adminUser.status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="addLabelVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click.native.prevent="addConfirm">{{dailogBtn}}</el-button>

            </div>
        </el-dialog>
    </section>
</template>

<script>
import {
    getAdminUserByParam,
    getRoleNameList,
    addAdminUserAndAuth,
    deleteAdminUser
} from "../../api/api";
import { getrole } from "../../common/js/role";
export default {
    data() {
        return {
            closeOnClickModal: false,
            input: "", // 输入、

            tableData: [],
            formInline: "name",
            roleoptions: [], //下拉框数组
            addLabelVisible: false,
            formLabelWidth: "120px",

            dailogType: "",
            dailogTitle: "",
            dailogBtn: "",

            search: "",
            listLoading: false,

            rolevalue: "",
            dynamicTags: [], //tag标签
            newroleoptions: [], //新的标签数组
            postselectData: [], //需要提交的id数组

            disabname: false, //用户名disable

            adminUser: {
                mobile: "",
                name: "",
                passWord: "",
                permission: "",
                status: 1,
                type: 1,
                userName: ""
            },
            rules: {
                userName: [
                    {
                        required: true,
                        message: "请输入登录名",
                        trigger: "blur"
                    }
                ],
                passWord: [{}],
                name: [
                    {
                        required: true,
                        message: "请输入真实姓名",
                        trigger: "blur"
                    }
                ],
                mobile: [
                    {
                        required: true,
                        message: "请输入工作手机",
                        trigger: "blur"
                    }
                ]
            },
            total: 0
        };
    },
    methods: {
        handelSearch(val) {
            this.getData(val);
        },
        handleCurrentChange(val) {
            this.handelSearch(val);
        },
        addLabel() {
            // this.rules.passWord[0]={ required: true, message: '请输入密码', trigger: 'blur' };
            this.$set(this.rules.passWord, 0, {
                required: true,
                message: "请输入密码",
                trigger: "blur"
            });

            this.dailogType = "add";
            // this.getlist();
            this.addLabelVisible = true;
        },
        //编辑员工信息
        editLable(item) {
            this.dailogType = "edit";
            // this.adminUser.userId=e;
            (this.disabname = true),
            (this.adminUser = JSON.parse(JSON.stringify(item)));
            if (item.status == "启用") {
                this.adminUser.status = 1;
            } else {
                this.adminUser.status = 0;
            }
            if (item.type == "在职") {
                this.adminUser.type = 1;
            } else {
                this.adminUser.type = 0;
            }
            this.dynamicTags = item.roles.split(",");
            this.addLabelVisible = true;
        },
        //打开弹窗
        opendailog() {
            this.getlist();
            this.dailogType == "add"
                ? (this.dailogTitle = "添加新员工")
                : (this.dailogTitle = "编辑新员工");
            this.dailogType == "add"
                ? (this.dailogBtn = "添加")
                : (this.dailogBtn = "修改");
        },
        //删除员工
        deladmin(index, id) {
            this.$confirm("此操作将永久删除该员工信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    deleteAdminUser({
                        adminId: id
                    })
                        .then(res => {
                            // 改变页面显示
                            this.tableData.splice(index, 1);
                            // 提示成功
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                        })
                        .catch(() => {
                            this.$message.error("网络挂啦，请求不到数据！");
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        addConfirm() {
            this.operationselect();
            this.adminUser.permission = this.postselectData.join(",");
            this.$refs.adminUser.validate(valid => {
                if (valid) {
                    if (!/^[1][3546789][0-9]{9}$/.test(this.adminUser.mobile)) {
                        this.$message.error("请输入正确格式手机号!");
                        return false;
                    }
                    if (this.dailogType == "add") {
                        if (this.adminUser.permission == "") {
                            this.$message({
                                message: "请选择权限!"
                            });
                        } else {
                            this.adminUser.flag = "add";
                            addAdminUserAndAuth(this.adminUser).then(res => {
                                this.$message({
                                    showClose: true,
                                    message: "添加成功"
                                });
                                this.getData(1);
                                this.addLabelVisible = false;
                            });
                        }
                    }
                    if (this.dailogType == "edit") {
                        var reg = /^[A-Za-z0-9]{6,10}$/;
                        if (this.adminUser.permission == "") {
                            this.$message({
                                message: "请选择权限!"
                            });
                        } else if (
                            this.adminUser.passWord != "" &&
                            !reg.test(this.adminUser.passWord)
                        ) {
                            this.$message.error(
                                "密码为六到十位的数字和字母的组合！"
                            );
                        } else {
                            this.adminUser.flag = "update";
                            addAdminUserAndAuth(this.adminUser).then(res => {
                                this.$message.success(res.data);
                                this.getData(1);
                                this.addLabelVisible = false;
                            });
                        }
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        Delete(index, row) {},
        selectChange(e) {
            if (this.dynamicTags.indexOf(e) != -1) {
                this.$message({
                    showClose: true,
                    message: "不能重复添加哦!"
                });
                this.rolevalue = "";
                return;
            }
            if (e) {
                this.dynamicTags.push(e);
            }
            this.rolevalue = "";
        },
        //权限列表下拉框
        getlist() {
            getRoleNameList().then(res => {
                this.roleoptions = res.data.list;
                var roleArr = res.data.list;
                // var thisrole=getrole()
                // if (thisrole && thisrole.indexOf("管理员")==-1 || thisrole.indexOf("超级管理员")==-1) {
                //   for (var i = 0; i < roleArr.length; i++) {
                //     if(roleArr[i].name=="超级管理员"){
                //         roleArr.splice(i, 1);
                //     }
                //     if(roleArr[i].name=="管理员"){
                //         roleArr.splice(i, 1);
                //     }
                //   }
                // }
                this.roleoptions = roleArr;
                this.newroleoptions = res.data.list;
            });
        },
        // 获取列表
        getData(pageNum) {
            this.listLoading = true;
            const getall = {
                key: this.formInline,
                value: this.input,
                pageNum: pageNum
            };
            // 请求数据
            getAdminUserByParam(getall).then(res => {
                this.listLoading = false;
                this.tableData = res.data.list;
                this.total = res.data.totalPage;
            });
        },
        //点击关闭tag
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        //关闭弹框
        closedailog() {
            const adminUser = {
                mobile: "",
                name: "",
                passWord: "",
                permission: "",
                status: 1,
                type: 1,
                userName: ""
            };
            // this.rules.passWord[0]={};
            this.$set(this.rules.passWord, 0, {});
            this.adminUser = adminUser;
            this.dynamicTags = [];
            this.dailogType = "";
            this.disabname = false;

            this.$refs.adminUser.resetFields();
        },
        operationselect() {
            var newselect = this.newroleoptions;
            var _thisvalue = this.dynamicTags;
            const newval = [];
            for (var i = 0; i < newselect.length; i++) {
                for (var j = 0; j < _thisvalue.length; j++) {
                    if (newselect[i].name == _thisvalue[j])
                        newval.push(newselect[i].autoId);
                }
            }
            this.postselectData = newval;
        }
    },
    mounted() {
        this.getData(1);
    }
};
</script>

<style>
.el-tag {
    margin-left: 10px;
}

.el-checkbox + .el-checkbox {
    margin-left: 0 !important;
}

.el-form-item.is-required .el-form-item__label:before {
    content: "" !important;
}
</style>
